<template>
	<view class="content1" :style="'background:#F7F7F7;'">
		<view class="toptitle" :style="'top:0;padding-top:' + zhuangtai + 'px;height:' + (aniosgaodu+zhuangtai) + 'px;'">
			{{title}}
		</view>
		<view :style="'height:' + topgaodu + 'px;'"></view>
		<view class="add-mini-top" :style="'top:'+topgaodu+'px;'" v-if="show_add_appmini">
			<image class="close-mini" src="../../../static/close-add-index.png" @click="showAppMini" mode=""></image>
			<image class="add-mini-bg" src="../../../static/index-add-wx.png" mode=""></image>
			<view class="top-text-mini" :style="'color:#FFFFFF;'">
				<text class="top-text-info">点击右上角</text>
				<image class="top-text-image" src="../../../static/jiaonang.png" mode=""></image>
			</view>
			<text class="bottom-text" :style="'color:#FFFFFF;'">添加到我的小程序</text>
			<image class="bottom-image" src="../../../static/showjiaonang.png" mode=""></image>
		</view>
		<view class="index-top-item" :style="'background:#E9564F;'">
			<view class="index-item1" :style="'color:#FFFFFF;'">
				<image class="start-icon" :src="app_config.gold_coin_icon" mode=""></image>
				<view class="item-text">
					<text class="font28"><text class="font44 fontw">{{my_index_data.gold_coin || 0}}</text>{{app_config.gold_coin_name}}</text>
					<view class="task-go-to" @click="goToTask">
						<text>做任务得{{app_config.gold_coin_name}}</text>
						<image class="next-task" src="../../../static/next.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="line-top-index" :style="'background:#FFFFFF;'"></view>
			<view class="index-item1" :style="'color:#FFFFFF;'">
				<image class="start-icon" :src="app_config.game_coin_icon" mode=""></image>
				<view class="item-text" @click="goToLutteryWidthdrawal">
					<text class="font28"><text class="font44 fontw">{{my_index_data.money ||0}}</text>{{app_config.money_name}}</text>
					<view class="task-go-to">
						<text>去提现</text>
						<image class="next-task" src="../../../static/next.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="top-tab-list">
			<scroll-view scroll-y="true" style="width: 750upx;">
				<view class="top-tab-scroll-view">
					<block v-for="(item, index) in classification" :key="index">
						<view class="tab-item" :style="{color:(top_tab_id == item.id?'#FFFFFF;':'#111111;'),
														background:(top_tab_id == item.id?'linear-gradient(-4deg, rgba(251, 98, 102, 0.99), rgba(255, 128, 132, 0.99));':'#FFFFFF;')}"
														@click="changeTabId(item.id)">
							<text class="font30">{{item.name}}</text>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<block v-for="(item, index) in tag_list" :key="index">
			<view class="recommended-benefits-list" v-if="item.layout_type == 1">
				<view class="recommended-top-text font34 fontw" :style="'color:#E9564F;'">{{item.name}}</view>
				<block v-for="(itemL, indexL) in item.list" :key="indexL" v-if="item.list.length>0">
					<view class="benefits-item" @click="goToLutterInfo(itemL.id)">
						<view class="item-image" style="display: flex;align-items: center;justify-content: center;">
							<image class="item-image" :src="itemL.cover" mode="heightFix"></image>
						</view>
						<view class="item-info">
							<text class="sponsor-text font30 fontw" :style="'color:#E9564F;'" v-if="itemL.diversion_name !=''">{{itemL.diversion_name}}   赞助</text>
							<view class="gift-item-list font30" :style="'color:#111111;'">
								<block v-for="(itemG, indexG) in itemL.goods" :key="indexG">
									<text class="goods-text-showno">{{itemG.sort}}等奖：{{itemG.name}}</text>
								</block>
							</view>
							<view class="open-luttery-time">
								<text class="font28" :style="'color:#AeAeae;'">{{itemL.open_time}}自动开奖</text>
								<view v-if="itemL.has_join == 1" class="join-btn" :style="'background:#fbdddc;'">
									<text :style="'color:#E9564F;'">已参与</text>
								</view>
								<view v-else class="join-btn" :style="'background:#E9564F;'">
									<text :style="'color:#ffffff;'">点击参与</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="recommended-benefits-list" style="margin-top: 20upx;" v-if="item.layout_type == 2">
				<view  class="recommended-top-text font34 fontw" :style="'color:#E9564F;'">{{item.name}}</view>
				<scroll-view scroll-y="true" style="width: 750upx;margin-bottom: 50upx;" v-if="item.list.length>0">
					<view class="item-scroll-view">
						<block v-for="(itemL, indexL) in item.list" :key="indexL">
							<view class="item-welfare" :style="'background:#FFFFFF'" @click="goToLutterInfo(itemL.id)">
<<<<<<< HEAD
								<image class="welfare-image" :src="itemL.cover" mode=""></image>
								<text class="font30 item-text" :style="'color:#111111;'">奖品：{{itemL.goods[0].name}}*{{itemL.goods[0].num}}份</text>
								<text class="font28 item-text1" :style="'color:#AEAEAE;'" v-if="itemL.diversion_name !=''">{{itemL.diversion_name}}赞助</text>
=======
								<view class="welfare-image" style="display: flex;align-items: center;justify-content: center;">
									<image class="" style="width: 100%;height: 100%;" :src="itemL.cover" mode="heightFix"></image>
								</view>
								<block v-for="(itemG, indexG) in itemL.goods" :key="indexG">
									<text class="font30 item-text" :style="'color:#111111;'">奖品：{{itemG.name}}*{{itemG.num}}份</text>
								</block>
								<text class="font28 item-text1" :style="'color:#AEAEAE;'">{{itemL.diversion_name}}赞助</text>
>>>>>>> 263842a02420c7090936b7737331a37d9618b572
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
			<view class="self-help-list" v-if="item.layout_type == 3">
				<view class="recommended-top-text font34 fontw" :style="'color:#E9564F;'">{{item.name}}</view>
				<block v-for="(itemL, indexL) in item.list" :key="indexL" v-if="item.list.length>0">
					<view class="list-item" :style="'background:#FFFFFF;'" @click="goToLutterInfo(itemL.id)">
						<view class="item-iamge" style="display: flex;align-items: center;justify-content: center;">
							<image class="item-iamge" :src="itemL.cover" mode="heightFix"></image>
						</view>
						<view class="item-text-list">
							<block v-for="(itemG, indexG) in itemL.goods" :key="indexG">
								<text class="font30 text1" :style="'color:#111111;'">奖品：{{itemG.name}}*{{itemG.num}}份</text>
							</block>
							<text class="font28" :style="'color:#AEAEAE;'" v-if="itemL.diversion_name !=''">{{itemL.diversion_name}}赞助</text>
						</view>
					</view>
				</block>
			</view>
		</block>
		<view class="bargining-index">
			<view class="bar-top-title">
				<text class="left-text">砍价免费拿</text>
				<view class="right-text-index" @click="goToBargining">
					<text class="text1">查看更多</text>
					<image src="../../../static/neck-bload.png" mode=""></image>
				</view>
			</view>
			<block v-for="(item, index) in 3" :key="index">
				<view class="bargining-item">
					<image class="image-left" src="" mode=""></image>
					<view class="item-right">
						<text class="item-title">王者荣耀皮肤 白晶晶芈月</text>
						<view class="item-center">
							<view class="item-ready">
								<view class="item-ready-line" style="width: 70%;"></view>
							</view>
							<text class="item-ready-text">已砍40%</text>
						</view>
						<view class="item-bottom">
							<text class="item-number-user">532人已免费拿</text>
							<view class="bargining-btn">
								<text>继续砍价</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<uni-popup ref="newUserLuttery" type="center" :maskClick="false">
			<view class="new-user-luttery" :style="'background:#FEECED;'">
				<image class="closeAssistant" @click="$refs.newUserLuttery.close()" src="../../../static/popuplutteryAssistantClose.png" mode=""></image>
				<image class="topimage" src="../../../static/newusergift.png" mode=""></image>
				<view class="new-user">
					<text class="new-user-top-text font30" :style="'color:#111111;'">
						欢迎来到抽奖助手快去参与您的新人专属活动吧~
					</text>
					<view class="new-user-red-money">
						<image class="new-user-red-money-image" src="../../../static/newuserredmoney.png" mode=""></image>
						<text class="red-money-text font30" :style="'color:#FFFFFF;'">{{tag_list[0].list[0].goods[0].name}}*{{tag_list[0].list[0].goods[0].num}}份~份来自：
							<text style="text-decoration: underline;">{{tag_list[0].list[0].name}}</text>
						</text>
					</view>
				</view>
				<view class="popup-btn" @click="goToLutterInfo(tag_list[0].list[0].id)">
					<text class="font34" :style="'color:#FFFFFF;'">点击参与</text>
				</view>
			</view>
		</uni-popup>
		<tabbar ref='tabbar'></tabbar>
	</view>
</template>

<script>
	import tabbar from '@/components/tabBar/tabBar'
	var util = require('@/js/util.js')
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				title:"首页",
				zhuangtai: 20,
				aniosgaodu: 48,
				topgaodu: 68,
				is_iphone:false,
				top_tab_id:1,
				menu:[],
				classification:'',
				tag_list:[],
				tag_id:1,
				luttery_list:[],
				app_config:'',
				my_index_data:'',
				category_id:0
			}
		},
		onLoad(e) {
			uni.hideTabBar();
			this.getLutteryConfig()
			this.createtitle();
			this.$refs['tabbar'].setMenu();
			this.app_config  = uni.getStorageSync("appconfig")
			let pages = getCurrentPages();
			let route = pages[pages.length - 1].route;
			this.$refs['tabbar'].gettabid(route);
			console.log("app_onLoad")
		},
		onShow() {
			this.getIndexClassFication()
			// this.getTagList()
			this.getMyIndexData()
		},
		onShareAppMessage() { // 分享 buttom share
			return {
				title: '抽奖助手',
				path: '/pages/index/index?parent_id='+uni.getStorageSync('member_id')+'&prizedraw_id='+this.luttery_id
			}
		},
		onHide() {
			this.luttery_list = []
		},
		onShareAppMessage() {
			
		},
		onUnload() {
			this.luttery_list = []
		},
		computed:{
			show_add_appmini(){
				return this.$store.state.show_add_appmini
			}
		},
		methods: {
<<<<<<< HEAD
			showAppMini(){
				this.$store.commit("editAddAppMini",false)
=======
			goToBargining(){
				uni.navigateTo({
					url:'../bargaining/index'
				})
>>>>>>> 263842a02420c7090936b7737331a37d9618b572
			},
			getMyIndexData(){
				let _self = this
				uni.request({
					url: util.getUrl("member/index"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.my_index_data = res.data.data
						}else{
<<<<<<< HEAD
=======
							
>>>>>>> 263842a02420c7090936b7737331a37d9618b572
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
					},
				});
			},
			getLutteryConfig(){
				let _self = this
				uni.request({
					url: util.getUrl("prizedraw/config"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.luttery_config = res.data.data
							uni.setStorageSync("luttery_config",_self.luttery_config)
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
					},
				});
			},
			changeTagId(id){
				this.tag_id = id
			},
			getIndexClassFication(){
				uni.showLoading({
					title:'请稍等哦～'
				})
				let _self = this
				uni.request({
					url: util.getUrl("prizedraw/category"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.classification = res.data.data
<<<<<<< HEAD
							_self.top_tab_id = _self.classification[0].id
							_self.getTagList(_self.top_tab_id)
=======
							_self.top_tab_id = res.data.data[0].id
>>>>>>> 263842a02420c7090936b7737331a37d9618b572
						}else{
							uni.navigateTo({
								url:'../../../pages/login/login'
							})
						}
					},
				});
			},
			getTagList(id){
				uni.showLoading({
					title:'请稍等哦～'
				})
				let _self = this
				uni.request({
					url: util.getUrl("prizedraw/tag"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
<<<<<<< HEAD
						category_id:id
=======
						category_id :_self.top_tab_id
>>>>>>> 263842a02420c7090936b7737331a37d9618b572
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.tag_list = res.data.data;
							console.log(_self.tag_list)
							_self.tag_list.forEach((val,index,arr)=>{
								if(val.layout_type == 1){
									val.list.forEach((val1,index1,arr1)=>{
										val1.goods.forEach((val2)=>{
											val2.sort = this.$chinese(val2.sort)
										})
									})
								}
							})
							uni.hideLoading()
							if(uni.getStorageSync("token") && uni.getStorageSync("is_new") == 1){
								this.$refs.newUserLuttery.open()
							}
						}
					},
				});
			},
			getLutteryList(id,key){
				let _self = this
				console.log(id,key)
				uni.request({
					url: util.getUrl("prizedraw/list"),
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authori-zation':uni.getStorageSync("token")
					},
					data:{
						tag_id:id,
						category_id:_self.top_tab_id,
					},
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							_self.tag_list = res.data.data;
							var data = [];
							data = res.data.data;
							console.log(res.data.data)
							_self.luttery_list[key] = data;
							console.log("_self.luttery_list",_self.luttery_list);
							uni.hideLoading()
						}
					},
				});
			},
			changeTabId(id){
				this.top_tab_id = id
				this.luttery_list = []
				this.getTagList(id)
			},
			goToTask(){
				uni.navigateTo({
					url:'../task/index'
				})
			},
			goToLutteryWidthdrawal(){
				uni.navigateTo({
					url:'lutteryWithdrawal'
				})
			},
			goToLutterInfo(id){
				this.$refs.newUserLuttery.close()
				uni.navigateTo({
					url:'lutteryInfo?id='+id
				})
			},
			goToTab(url,url_name){
				console.log(url)
				if(url_name == "index"){
					
				}else if(url_name == 'luttery'){
					uni.reLaunch({
						url:url
					})
				}
			},
			createtitle() {
				var that = this;
				uni.getSystemInfo({
					success: function(res) {
						console.log(res);
						that.zhuangtai = res.statusBarHeight;
						var a = res.system.split(' ');
						if (a[0] == 'iOS') {
							that.aniosgaodu = 44;
							that.is_iphone = true
						} else {
							that.aniosgaodu = 48;
						}
						that.topgaodu = that.aniosgaodu + parseInt(that.zhuangtai)
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.bargining-index{
		display: flex;
		width: 690upx;
		flex-direction: column;
		margin-bottom: 20upx;
		.bargining-item{
			display: flex;
			align-items: center;
			width: 690upx;
			padding: 30upx;
			border-radius: 20upx;
			background: #FFFFFF;
			box-sizing: border-box;
			margin-bottom: 30upx;
			.item-right{
				display: flex;
				flex-direction: column;
				.item-title{
					font-size: 30upx;
					color: #111111;
					margin-bottom: 29upx;
				}
				.item-bottom{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.item-number-user{
						font-size: 28upx;
						color: #AEAEAE;
					}
					.bargining-btn{
						box-sizing: border-box;
						padding: 10upx 16upx;
						border-radius: 24upx;
						background: #FBDDDC;
						font-size: 30upx;
						color: #E9564F;
						font-weight: 400;
					}
				}
				.item-center{
					display: flex;
					align-items: center;
					margin-bottom: 30upx;
					.item-ready{
						display: flex;
						align-items: center;
						width: 253upx;
						height: 10upx;
						background: #FBDDDC;
						border-radius: 5upx;
						.item-ready-line{
							height: 10upx;
							border-radius: 5upx;
							background: #E9564F;
						}
					}
					.item-ready-text{
						font-size: 28upx;
						color: #E9564F;
						margin-left: 35upx;
					}
				}
			}
			.image-left{
				width: 200upx;
				height: 192upx;
				border-radius: 10upx;
				margin-right: 30upx;
				background: #EBEBEB;
			}
		}
		.bar-top-title{
			display: flex;
			align-items: center;
			margin-bottom: 30upx;
			justify-content: space-between;
			.left-text{
				font-size: 34upx;
				color: #E9564F;
				font-weight: bold;
			}
			.right-text-index{
				display: flex;
				align-items: center;
				.text1{
					font-size: 28upx;
					color: #7c7c7c;
					margin-right: 9upx;
				}
				image{
					width: 16upx;
					height: 28upx;
				}
			}
		}
	}
	.add-mini-top{
		width: 313upx;
		height: 346upx;
		position: fixed;
		display: flex;
		align-items: center;
		flex-direction: column;
		right: 30upx;
		z-index: 98;
		.close-mini{
			position: absolute;
			top: 18upx;
			right: 11upx;
			width: 20upx;
			height: 20upx;
			z-index: 1;
		}
		.top-text-mini{
			display: flex;
			align-items: center;
			margin-bottom: 21upx;
			margin-top: 50upx;
			z-index: 1;
			.top-text-info{
				font-size: 30upx;
				margin-right: 20upx;
			}
			.top-text-image{
				width: 77upx;
				height: 48upx;
			}
		}
		.bottom-text{
			font-size: 30upx;
			margin-bottom: 20upx;
			z-index: 1;
		}
		.bottom-image{
			width: 253upx;
			height: 150upx;
			z-index: 1;
		}
		.add-mini-bg{
			position: absolute;
			z-index: 0;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	}
	.new-user{
		display: flex;
		align-items: center;
		flex-direction: column;
		.new-user-top-text{
			width: 404upx;
			text-align: center;
			line-height: 40upx;
			margin-top: 113upx;
			margin-bottom: 39upx;
		}
		.new-user-red-money{
			display: flex;
			justify-content: center;
			position: relative;
			width: 520upx;
			height: 565upx;
			margin-bottom: 50upx;
			.red-money-text{
				position: absolute;
				z-index: 1;
				bottom: 111upx;
				width: 331upx;
				text-align: center;
				line-height: 40upx;
			}
			.new-user-red-money-image{
				position: absolute;
				z-index: 0;
				height: 100%;
				width: 100%;
				top: 0;
				left: 0;
			}
		}
	}
	
	.new-user-luttery{
		display: flex;
		position: relative;
		width: 660upx;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		padding-bottom: 50upx;
		border-radius: 20upx;
		.closeAssistant{
			width: 31upx;
			height: 31upx;
			position: absolute;
			top: 24upx;
			right: 24upx;
		}
		.topimage{
			width: 361upx;
			height: 226upx;
			position: absolute;
			top: -153upx;
		}
		.popup-btn{
			display: flex;
			align-items: center;
			width: 410upx;
			justify-content: center;
			height: 80upx;
			border-radius: 20upx;
			background: linear-gradient(-4deg, rgba(251, 98, 102, 0.99), rgba(255, 128, 132, 0.99));
		}
	}
	.self-help-list{
		display: flex;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
		padding: 0 30upx;
		.self-help-list-text{
			margin-bottom: 30upx;
		}
		.recommended-top-text{
			margin-bottom: 30upx;
		}
		.list-item{
			display: flex;
			align-items: center;
			width: 690upx;
			margin-bottom: 30upx;
			box-sizing: border-box;
			padding: 20upx;
			border-radius: 20upx;
			.item-iamge{
				width: 200upx;
				height: 160upx;
				border-radius: 12upx;
				margin-right: 30upx;
			}
			.item-text-list{
				display: flex;
				flex-direction: column;
				.text1{
					margin-bottom: 25upx;
					line-height: 40upx;
				}
			}
		}
		
	}
	.recommended-benefits-list{
		width: 750upx;
		padding: 0 30upx;
		box-sizing: border-box;
		.item-scroll-view{
			align-items: center;
			display: -webkit-box;
			overflow-x: scroll;
			.item-welfare{
				width: 330upx;
				display: flex;
				flex-direction: column;
				margin-right: 30upx;
				border-radius: 20upx;
				.item-text{
					margin-left: 30upx;
					margin-right: 22upx;
					margin-bottom: 28upx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.item-text1{
					margin-bottom: 30upx;
					margin-left: 30upx;
				}
				.welfare-image{
					width: 330upx;
					height: 180upx;
					margin-bottom: 28upx;
					padding-top: 20upx;
					box-sizing: border-box;
				}
			}
		}
		.benefits-item{
			display: flex;
			flex-direction: column;
			width: 690upx;
			background-color: #FFFFFF;
			border: 2upx solid #f7f7f7;
			border-radius: 20upx;
			margin-bottom: 30upx;
			.item-info{
				display: flex;
				flex-direction: column;
				.sponsor-text{
					margin-bottom: 28upx;
					margin-left: 35upx;
				}
				.gift-item-list{
					display: flex;
					flex-direction: column;
					margin-bottom: 18upx;
					margin-left: 35upx;
					line-height: 40upx;
					.goods-text-showno{
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				.open-luttery-time{
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					padding: 0 31upx 30upx 34upx;
					.join-btn{
						display: flex;
						align-items: center;
						justify-content: center;
						width: 150upx;
						height: 48upx;
						background-color: rgba(251,221,220,0.2);
						border-radius: 24upx;
						
					}
				}
			}
			.item-image{
				width: 690upx;
				height: 300upx;
				margin-bottom: 30upx;
				border-radius: 20upx;
			}
		}
		.recommended-top-text{
			margin-bottom: 30upx;
			color: #E9564F;
		}
	}
	.top-tab-list{
		display: flex;
		align-items: center;
		padding-left: 30upx;
		width: 750upx;
		overflow: hidden;
		box-sizing: border-box;
		margin-bottom: 50upx;
		.top-tab-scroll-view{
			align-items: center;
			display: -webkit-box;
			overflow-x: scroll;
			.tab-item{
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 26upx 41upx;
				box-sizing: border-box;
				border-radius: 40upx;
				margin-right: 20upx;
			}
		}
	}
	.index-top-item{
		width: 750upx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 36upx 28upx;
		margin-bottom: 50upx;
		.line-top-index{
			width: 2upx;
			opacity: 0.15;
			height: 110upx;
			margin-right: 28upx;
			margin-left: 47upx;
		}
		.index-item1{
			display: flex;
			align-items: center;
			.start-icon{
				width: 78upx;
				height: 78upx;
				margin-right: 28upx;
			}
			.item-text{
				display: flex;
				flex-direction: column;
				.task-go-to{
					display: flex;
					align-items: center;
					font-size: 28upx;
					margin-top: 20upx;
					.next-task{
						margin-left: 10upx;
						width: 16upx;
						height: 27upx;
					}
				}
			}
		}
	}
	.content1{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750upx;
		background: #F7F7F7;
		font-family: PingFang SC;
		min-height: 100vh;
	}
	.toptitle {
		background: none;
		position: fixed;
		z-index: 98;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 32px;
		color: #333;
		background: #FFFFFF;
		font-size: 36upx;
	}
	.footTabList{
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		font-size: 24rpx;
		z-index: 98;
		padding-top: 12rpx;
		.listitem{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100rpx;
			image{
				width: 42rpx;
				height: 42rpx;
				margin-bottom: 15rpx;
			}
		}
	}
</style>
